<template>
  <div>
    <div>
      <el-table
        ref="selectVal"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        style="overflow: auto"
        :header-cell-style="{
          background: '#F3F4F7',
          color: '#555',
          padding: '3px 0px 3px 0px',
        }"
        :cell-style="{ padding: '4px 0px 4px 0px' }"
        @row-click="rowClick"
        :row-class-name="rowIndex"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column v-if="multi == 1" type="selection" width="40" />
        <el-table-column
          v-if="multi == 0"
          label=""
          width="40"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio
            >
          </template>
        </el-table-column>

        <el-table-column
          label="供应商型号"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.specification }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="防水"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.iswaterproof }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="门幅"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.doorwidth }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="批号"
          align="center"
          min-width="50"
          show-overflow-tooltip
          prop="batchNumber"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.batchNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="供应商"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.supplier }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="现存数量"
          align="center"
          min-width="50"
          show-overflow-tooltip
          prop="inventoryQuantity"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.inventoryQuantity }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="可用数量"
          align="center"
          min-width="50"
          show-overflow-tooltip
          prop="availableQuantity"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.availableQuantity }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listInventory } from "@/api/material/inventory";
export default {
  props: ["multi", "frbaicName"],
  data() {
    return {
      title: "库存信息",
      listLoading: false,
      list: [], //  列表数据
      strfilter: "", // 搜索框内输入的值
      total: 0,
      radio: "", // 单选用参数默认为0即可
      selrows: "", // 选择的内容 单选变量
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        repositoryName: null,
        inventoryCode: null,
        frbaicName: null,
        specification: null,
        unit: null,
        batchNumber: null,
        inventoryQuantity: null,
        availableQuantity: null,
        accurate: true,
        isEmpty: "0",
      },
    };
  },
  mounted() {},
  methods: {
    getCurrentRow(row) {
      this.$forceUpdate();
      this.selrows = row;
      this.$emit("singleSel", row);
    },
    // 加载列表
    getList(val) {
      if (!!val) {
        this.queryParams.frbaicName = val;
      }
      listInventory(this.queryParams).then((res) => {
        this.listLoading = false;
        this.list = res.rows;
        this.total = res.total;
        this.$forceUpdate();
      });
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
    getSummaries(param) {
      const { columns, data } = param;
      var arr = ["inventoryQuantity", "availableQuantity"];
      const sums = [];
      columns.forEach((column, index) => {
        var bor = false;
        if (
          arr.length > 0 &&
          arr.find((item) => item == column.property) != undefined
        ) {
          bor = true;
        }
        if (index === 0) {
          sums[index] = "合计";
        } else {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value)) && bor) {
            sums[index] = Number(
              values
                .reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0)
                .toFixed(2)
            );
          }
        }
      });
      console.log(sums, "sums");
      return sums;
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
</style>
